<template>
  <el-dialog
    :model-value="visible"
    :title="title"
    width="360px"
    :close-on-click-modal="false"
    :show-close="showClose"
    center
    class="base-confirm-dialog"
    modal-class="light-modal-mask"
    @close="onCancel"
  >
    <div class="dialog-content">
      <slot>{{ message }}</slot>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel" type="default">{{ cancelText }}</el-button>
        <el-button @click="onConfirm" type="primary">{{ confirmText }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  visible: Boolean,
  title: {
    type: String,
    default: ''
  },
  message: {
    type: String,
    default: ''
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  showClose: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['confirm', 'cancel'])
const onConfirm = () => emit('confirm')
const onCancel = () => emit('cancel')
</script>

<style scoped>
.base-confirm-dialog {
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  padding: 24px 32px !important;
}
.dialog-content {
  font-size: 16px;
  color: #333;
  text-align: center;
  margin-bottom: 18px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.el-button--primary {
  background: #409eff !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  min-width: 72px;
}
.el-button--default {
  background: #f5f5f5 !important;
  color: #333 !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  min-width: 72px;
}
</style>
